<template>
<div>

    <a-form
      ref="formRef"
      :rules="rules"
      :model="form"
      :style="{ width: '600px' }"
      @submit="handleSubmit"
    >
      <a-form-item field="name" label="账号" validate-trigger="blur">
        <a-input
          v-model="form.name"
          placeholder="please enter your username..."
        />
      </a-form-item>
      <a-form-item field="password" label="密码" validate-trigger="blur">
        <a-input-password
          v-model="form.password"
          placeholder="please enter your password..."
        />
      </a-form-item>
      <!-- <a-form-item field="password2" label="确认密码" validate-trigger="blur">
      <a-input-password v-model="form.password2" placeholder="please confirm your password..." />
    </a-form-item> -->
      <a-form-item field="验证码" label="验证码">
        <a-row class="grid-demo">
          <a-col :span="12">
            <a-input v-model="form.email" placeholder="验证码" />
          </a-col>
          <a-col :span="12">
            <div>
              <img :src="imgs" alt="" />
            </div>
          </a-col>
        </a-row>
      </a-form-item>
      <!--  <a-form-item field="ip" label="IP">
      <a-input v-model="form.ip" placeholder="please enter your ip..." />
    </a-form-item>
    <a-form-item field="url" label="URL">
      <a-input v-model="form.url" placeholder="please enter your url..." />
    </a-form-item>
    <a-form-item field="match" label="match">
      <a-input v-model="form.match" placeholder="please enter your match..." />
    </a-form-item> -->
      <a-form-item>
        <a-space>
          <a-button html-type="submit">确认</a-button>
          <!-- <a-button @click="$refs.formRef.resetFields()">确认密码</a-button> -->
        </a-space>
      </a-form-item>
    </a-form>

</div>
</template>
<script lang="ts" setup>
  const onSubmitClick = async () => {
    const res = await formRef.value?.validate();
    if (!res) {
      setLoading(true);
    }
    setTimeout(() => {
      setLoading(false);
    }, 1000);
  };
const rules = {
  username: [
    {
      required: true,
      message: "name is required",
    },
  ],
  password: [
    {
      required: true,
      message: "password is required",
    },
  ],
  password2: [
    {
      required: true,
      message: "password is required",
    },
    {
      validator: (value, cb) => {
        if (value !== form.password) {
          cb("two passwords do not match");
        } else {
          cb();
        }
      },
    },
  ],
  email: [
    {
      type: "email",
      required: true,
    },
  ],
  ip: [
    {
      type: "ip",
      required: true,
    },
  ],
  url: [
    {
      type: "url",
      required: true,
    },
  ],
  match: [
    {
      required: true,
      validator: (value: any, cb: any) => {
        return new Promise((resolve) => {
          if (!value) {
            cb("Please enter match");
          }
          if (value !== "match") {
            cb("match must be match!");
          }
          resolve();
        });
      },
    },
  ],
};
</script>
<style lang="scss" scoped>
</style>